<template>
  <div>
    <form class="">
      <div class="p-inputgroup flex-1 mb-3">
        <span class="p-inputgroup-addon">上级菜单</span>
        <Dropdown :options="menuStore.getFirstLevelMenu" :disabled="true" optionLabel="name" optionValue="pid" dataKey="pid" v-model="props.currentMenuItem.pid" placeholder="选择上级菜单"
          class="w-full md:w-14rem" />
      </div>
      <div class="p-inputgroup flex-1 mb-3">
        <span class="p-inputgroup-addon">菜单名称</span>
        <InputText placeholder="请输入菜单名称" v-model="props.currentMenuItem.name" />
      </div>
      <div class="p-inputgroup flex-1 mb-3">
        <span class="p-inputgroup-addon">菜单图标</span>
        <InputText placeholder="请输入菜单图标" v-model="props.currentMenuItem.icon"/>
      </div>
      <div class="p-inputgroup flex-1 mb-3">
        <span class="p-inputgroup-addon">链接地址</span>
        <InputText placeholder="请输入链接地址" v-model="props.currentMenuItem.path"/>
      </div>
      <Button label="提交" type="submit" icon="pi pi-check" @click="onSubmit" autofocus />
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Dropdown, Button, InputText, Toast } from '@/utils/primevue'
import FormItem from '@/components/FormItem';
import { useField, useForm } from 'vee-validate';
import { useToast } from 'vue-toastification'
import { useMenuStore } from '@/stores/menu'
import type { TAllMenuInfo } from '@/typing/base';

const { handleSubmit } = useForm()
const menuStore = useMenuStore()
const toast = useToast()

const props = defineProps<{
  currentMenuItem: Partial<TAllMenuInfo>
}>()

const onSubmit = handleSubmit((values) => {
  const { id=-1, pid=-1, name='', path='', icon='', level=-1 } = props.currentMenuItem
  menuStore.updateMenuInfo({ id, pid, name, path, icon, level}, () => {
    toast.success('更新数据成功～')
    menuStore.queryMenuList({ force: true })
  })
});
</script>

<style lang="less" scoped>
</style>
